<template>
  <Select v-model="value" :loading="loading" :label-in-value="labelInValue" :clearable="clearable" :filterable="filterable" :transfer="true" :transfer-class-name="'transferWrapper ' + classWrapper" @on-open-change="open" @on-change="onChange" @on-clear="onClear" @on-select="onSelect" :remote-method="remoteMethod" :placeholder="placeholder" @on-query-change="queryChange" :disabled="disabled">
    <slot></slot>
  </Select>
</template>

<script>
  export default {
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      labelInValue: Boolean,
      filterable: Boolean,
      clearable: Boolean,
      remoteMethod: Function,
      placeholder: String,
      value: String,
      disabled: Boolean
    },
    data(){
      return {
        classWrapper: '',
        loading: false,
      }
    },
    created() {
      this.classWrapper = 'classWrapper_' + this.randomStr()
    },
    destroyed(){
      const element = document.documentElement.querySelector('.' + this.classWrapper + ' .ivu-select-dropdown-list');
      element && element.removeEventListener('scroll', this.scrollbar)
    },
    methods: {
      randomStr(num){
        const codeArr = ['2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'k', 'm', 'n', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
        ];
        num = num || 5;
        let code = [];
        for (let i = 0; i < num; i++) {
          const index = Math.floor(Math.random() * 53);
          code.push(codeArr[index]);
        }
        return code.join('');
      },
      scrollbar(e){
        const clientHeight = e.target.clientHeight;
        const scrollTop = e.target.scrollTop;
        const scrollHeight = e.target.scrollHeight;
        if((clientHeight + scrollTop > scrollHeight * 0.9) && !this.loading){
          this.loading = true;
          this.$emit('scrollBottom', (loading) => {
            this.loading = loading || false;
          })
        }
      },
      open(status){
        const element = document.documentElement.querySelector('.' + this.classWrapper + ' .ivu-select-dropdown-list');
        if(status){
          element && element.addEventListener('scroll', this.scrollbar)
        } else {
          element && element.removeEventListener('scroll', this.scrollbar)
        }
        this.$emit('on-open-change',status)
      },
      onChange(value){
        this.$emit('on-change',value);
        if(this.labelInValue){ // 双向绑定赋值
          this.$emit('change',value ? value.value : null );
        } else {
          this.$emit('change',value);
        }
      },
      onClear(){
        this.$emit('on-clear')
      },
      onSelect(value){
        this.$emit('on-select',value)
      },
      queryChange(value){
        this.$emit('on-query-change',value)
      }
    }
  }
</script>

<style lang="scss">
  .transferWrapper{
    .ivu-select-dropdown-list{
      max-height: 250px;
      overflow-y: auto;
    }
  }
</style>
